@prefix-drawer: ~'@{nameSpace}-drawer';

@keyframes drawer-body-keyframes-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

@keyframes drawer-body-keyframes-left {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}

.@{prefix-drawer} {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  color: var(--design-text-color-5);
  overflow: hidden;

  .@{prefix-drawer}-main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;

    .@{prefix-drawer}-body {
      position: relative;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      .flex();
      .flex-column();
      box-shadow: 0 0 10px var(--design-shadow-color);

      .@{prefix-drawer}-icon {
        position: absolute;
        top: 24px;
        right: 24px;
        transition: color 0.3s;
        .cursor-pointer();

        &:hover {
          color: var(--design-text-color-4);
        }
      }

      .@{prefix-drawer}-header {
        color: var(--design-base-color);
        font-size: var(--design-font-size-xl);
        padding: 0 24px;
        min-height: 72px;
        .flex();
        .align-center();
        background-color: var(--design-bg-color-3);
      }

      .@{prefix-drawer}-container {
        flex: 1;
        padding: 24px;
        background-color: var(--design-bg-color-4);
        .scrollbar-lg();
        overflow: auto;
      }

      .@{prefix-drawer}-footer {
        background-color: var(--design-bg-color-3);
        .flex();
        .align-center();
        gap: 10px;
        padding: 0 24px;
        min-height: 72px;
      }

      .@{prefix-drawer}-footer-border {
        border-top: var(--design-border-sm) solid var(--design-border-color-3);
      }
    }

    .@{prefix-drawer}-body-border {
      border: var(--design-border-sm) solid var(--design-base-color-5);
    }

    .@{prefix-drawer}-body-keyframes-right {
      animation: drawer-body-keyframes-right 0.3s;
    }

    .@{prefix-drawer}-body-keyframes-left {
      animation: drawer-body-keyframes-left 0.3s;
    }
  }

  .@{prefix-drawer}-main-left {
    justify-content: flex-start;
  }

  .@{prefix-drawer}-main-right {
    justify-content: flex-end;
  }
}